<include file='Public:Header' />
<div id="main_content">
	<h2 class="grid_12"> Messages </h2>
	<div class="clean"></div>
	<div class="grid_4">&nbsp;</div>
	<div class="grid_4">
		<div class="box">
			<div class="header">
				<img width="16" height="16" alt="" src="__ROOT__/Public/images/resource-monitor.png">
				<h3> Messages </h3>
			</div>
			<div class="content">
					<button id="alert" style="width:150px; text-align: center; margin:20px 0;">Alert-like</button>
                   <p> <button id="confirm" style="width:150px; text-align: center">Confirm-like</button></p>
			</div>
		</div>
	</div>
	<div class="clean"></div>  
<script>
	$(window).load(function() {
		$("#alert").click(function() {
			$.fallr({
				content: "Hello from fallr!"
			})
		});
		$("#confirm").click(function() {
			var a = function() {
				alert("congrats, you've deleted internet");
				$.fallr("hide")
			};
			$.fallr("show", {
				buttons: {
					button1: {
						text: "Yes",
						danger: true,
						onclick: a
					},
					button2: {
						text: "Cancel",
						onclick: function() {
							$.fallr("hide")
						}
					}
				},
				content: "<p>Are you sure you want to delete internet?</p>",
				icon: "error"
			})
		});
		$("#prompt").click(function() {
			var a = function() {
				var b = $(this).children("form").children("#yourname").val();
				alert("Hello, " + b);
				$.fallr("hide")
			};
			$.fallr("show", {
				buttons: {
					button1: {
						text: "Submit",
						onclick: a
					},
					button2: {
						text: "Cancel"
					}
				},
				content: '<p>Give me your name</p><form><input type="text" id="yourname" /></form>',
				icon: "form"
			})
		});
		$("#form").click(function() {
			var a = function() {
				var b = $(this).children("form").children('input[type="text"]').val();
				var c = $(this).children("form").children('input[type="password"]').val();
				if (b.length < 1 || c.length < 1) {
					alert("Invalid!\nPlease fill all required forms")
				} else {
					alert("username: " + b + "\npassword: " + c);
					$.fallr("hide")
				}
			};
			$.fallr("show", {
				icon: "secure",
				width: "320px",
				content: '<h4>Sign in</h4><form><input placeholder="Username" type="text"/><input placeholder="Password" type="password"/></form>',
				buttons: {
					button1: {
						text: "Submit",
						onclick: a
					},
					button4: {
						text: "Cancel"
					}
				}
			})
		});
		$("#no-overlay").click(function() {
			$.fallr("show", {
				content: "<p>Yay, no overlay!</p>",
				icon: "info",
				useOverlay: false
			})
		})
	});
</script>
</div>
<include file="Public:Footer" />